<template>
    <div>
        <div>parents_n：{{ n }}</div>
        <div>parents_name：{{ name }}</div>
        <div>parents_n_sync：{{ n_sync }}</div>
        <v-children :num="n" :name="name" :num_sync.sync="n_sync" @change="changeN" v-bind="$attrs"></v-children>
        <a href="" @click.prevent="changeProp2">changeProp2</a>
    </div>
</template>
<script>
import vChildren from './Children.vue';
export default {
    props: ['prop1'],
    components: {
        vChildren
    },
    data() {
        return {
            n: 1,
            name: 'zhangsan',
            n_sync: 10
        }
    },
    methods: {
        changeN(x, str) {
            console.log(x, str);
            this.n = this.n + x;
            console.log(this.n);
        },
        changeProp2() {
            this.$attrs.prop2++
            console.log(this.$attrs.prop2);
        }
    },
    mounted() {
        this.$children[0].name_child = '$children'
        console.log(this.$children[0].name_child);
        this.$parent.name_tongxin = '$parent'
        console.log(this.$parent.name_tongxin);
        console.log(this.$listeners.log333());
        console.log(this.$attrs.prop2);
    }
}
</script>
<style></style>